<template>
	<uni-popup ref="popup_confirm" type="center" border-radius="16px 16px 16px 16px">
		<view class="pop-box pad-20 font-18 font-500 col-000-8">
			<view class="title">
				{{title}}
			</view>
			<view class="content m-t-24 font-14 col-000-4">
				{{content}}
			</view>
			<view class="flex flex-between flex-center m-t-40">
				<view class="cancel flex-center-center font-14 font-500 col-000-8" @click="doCanel">
					{{cancelText}}
				</view>
				<view class="confirm flex-center-center font-14 font-500 col-fff" @click="doConfirm">
					{{confirmText}}
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			content: {
				type: String,
				default: ''
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			confirmText: {
				type: String,
				default: '确定'
			}
		},
		methods: {
			open() {
				this.$refs.popup_confirm.open('center')
			},
			closePopup() {
				this.$refs.popup_confirm.close()
			},
			doCanel() {
				this.$emit('cancel')
			},
			doConfirm() {
				this.$emit('confirm')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pop-box {
		width: 600rpx;
		background-color: #F3F3F3;
		border-radius: 16rpx;
		.title {
			width: 100%;
			text-align: left;
		}
		.content {
			width: 100%;
			text-align: left;
		}
		.cancel, .confirm {
			width: 240rpx;
			height: 100rpx;
			border-radius: 8rpx;
		}
		.cancel {
			background-color: #fff;
		}
		.confirm {
			background-color: #000;
		}
	}
	
</style>